import Vue from 'vue'

// slot 插槽
// 具名插槽
// 作用域插槽
const component = {
  props: ['prop1'],
  // template: `
  //   <div :style="style">
  //     <slot value="abc" bb="bbb"></slot>
  //   </div>
  // `,
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      }
    }
  },
  render (r) {
    return r('div', {
      style: this.style
      // on: {
      //   click: () => {
      //     this.$emit('click')
      //   }
      // }
    }, [
      // this.$slots.default,
      this.$slots.header,
      ',prop1:' + this.prop1
    ])
  }

}

new Vue({
  el: '#app',
  mounted () {
  },
  components: {
    CompOne: component
  },
  data: {
    value: '111'
  },
  // template: `
  //   <div>
  //     <comp-one ref="comp">
  //       <span ref="span">{{value}}</span>
  //     </comp-one>
  //   </div>
  // `,
  // 在生命周期的 中创建 createElement 虚拟dom v-node一个雷 类似dom结构的结构 与真实dom对比 更新
  render (createElement) {
    // retrun this.$createElement();
    return createElement(
      'comp-one', {
        ref: 'comp',
        props: {
          prop1: this.value
        },
        // v-on
        // on: {
        //   click: this.handleClick
        // },
        // nativeOn 绑定 不需要自己触发 $emit 而是绑定到组件根节点上
        nativeOn: {
          click: this.handleClick
        }
        // slot // 放在哪个slot名下 当前根节点 不需要
      }, [
        createElement('span', {
          ref: 'span',
          slot: 'header',
          // domProps: {
          //   innerHTML: '<span>abc</span>'
          // }
          attrs: {
            id: 'newId'
          }
        }, this.value)
      ])
  },
  methods: {
    handleClick () {
      console.log('被点击')
    }
  }
})
